body,
html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: left;
    position: relative;
    color: #202020;
    font-family: "Sawarabi Gothic", "æ¸¸ã‚´ã‚·ãƒƒã‚¯", "Yu Gothic", "æ¸¸ã‚´ã‚·ãƒƒã‚¯ä½“", YuGothic, "Yu Gothic UI", "ãƒ’ãƒ©ã‚®ãƒŽè§’ã‚´ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "ãƒ¡ã‚¤ãƒªã‚ª", Meiryo, "ï¼­ï¼³ ï¼°ã‚´ã‚·ãƒƒã‚¯", "MS PGothic", sans-serif
}

#canvas,
#canvas_bg {
    position: absolute;
    top: 0;
    left: 0
}

#canvas {
    z-index: 5;
    cursor: pointer
}

#video {
    visibility: hidden;
    position: absolute;
    z-index: -1;
    display: none;
}

#loading_bar {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    /* top: 50%; */
    background-color: black;
    height: 1px;
    -webkit-animation: flicker .001s ease-in-out infinite alternate;
    animation: flicker .001s ease-in-out infinite alternate;
}

@-webkit-keyframes flicker {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes flicker {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.bt {
    float: left;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.6);
    opacity: 1;
    z-index: 10;
    width: calc(32px + 3vmin);
    height: calc(32px + 3vmin);
}

.bt img {
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

#bt_full {
    top: 0;
    right: 0;
}

#bt_full img {
    transform: scale(0.72);
}

#bt_about {
    bottom: 0;
    right: 0;
    /* transform: scale(0.72); */
}

#bt_edit {
    bottom: 0;
    left: 0;
    /* transform: scale(0.72); */
}

#error_text {
    position: fixed;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    width: 100%;
    font-size: calc(.7rem + 1vmin);
    padding-left: calc(7px + .6vmin);
    font-family: rift, "Sawarabi Gothic", sans-serif;
    text-align: left;
    letter-spacing: .2rem;
    line-height: 1.5;
    color: #202020;
}

#game_panel {
    display: none;
    width: 100%;
    height: 100%;
    background-color: white;
}

@font-face {
    font-family: 'rift';
    /* 服务器存储字体的路径 */
    src: url('./rift.ttf') format("truetype");
}

#start_panel {
    height: 100%;
    opacity: 0;
    cursor: pointer;
    user-select: none;
    padding: 30vh 0;
    font-family: rift, "Sawarabi Gothic", sans-serif;
    text-align: left;
    background-color: white;
}

#start_panel #t1 {
    letter-spacing: 0.2rem;
}

#start_panel h1 {
    font-size: calc(1rem + 8vmin);
    padding-left: calc(5px + .2vmin);
    line-height: 1.2;
    margin-bottom: calc(10px + .5vmin);
    font-weight: 400;
}

#start_panel span {
    white-space: nowrap;
}

#start_panel .st {
    position: relative;
    display: inline-block;
    letter-spacing: 0.2rem;
    top: 0px;
    left: 0px;
    transform: none;
}

#t3 span {
    font-size: calc(1rem + 3vmin);
}

#start_panel .qr {
    margin-top: calc(25px + 3vmin);
}

#start_panel p {
    font-size: calc(1rem + 3vmin);
    margin-left: calc(2px + .4vmin);
    padding-left: calc(5px + .2vmin);
}

#about {
    display: none;
    color: #202020;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    height: 100%;
    font-family: rift, "Sawarabi Gothic", sans-serif;
    text-align: left;
    z-index: 21;
    width: 100%;
    letter-spacing: .2rem;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    background-color: #fafafa;
    opacity: 0.95;
    user-select: none;
}

#bt_close_about {
    float: left;
    right: 0;
    bottom: 0;
    position: absolute;
    transform: scale(0.4);
    width: calc(32px + 3vmin);
    height: calc(32px + 3vmin);
}

#center {
    height: 60%;
    width: 100%;
    float: left;
    top: 25%;
    left: 5%;
    position: relative;
}

#about h2 {
    margin-bottom: calc(5px + .5vmin);
    font-size: calc(1rem + 2vmin);
}

#about h3 {
    font-size: calc(.8rem + .8vmin);
    margin-bottom: calc(20px + 3vmin);
}

#center a {
    border-bottom: solid calc(1px + .1vmin) #202020;
}

#hide_ui {
    margin-bottom: calc(20px + 3vmin);
}

#switch_camera {
    margin-bottom: calc(20px + 3vmin);
}

#hide_ui #box,
#switch_camera #box {
    width: calc(18px + 2vmin);
    height: calc(18px + 2vmin);
    border: solid calc(1.2px + .1vmin) #202020;
    display: inline-block;
    vertical-align: middle;
    margin-right: calc(10px + 1vmin);
    cursor: pointer;
}

#hide_ui #text,
#switch_camera #text {
    border-bottom: dotted calc(1.2px + .1vmin) #202020;
    padding-bottom: calc(2px + .2vmin);
    cursor: pointer;
    font-size: calc(.7rem + .8vmin);
}

#hide_ui #inner_box,
#switch_camera #inner_box {
    display: none;
    cursor: pointer;
    width: 70%;
    height: 70%;
    margin: 15%;
    background: #202020;
    vertical-align: middle;
    margin-right: calc(10px + 1vmin);
}

.desc {
    font-size: calc(.6rem + .7vmin);
}

#edit_panel {
    display: none;
    float: left;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.6);
    opacity: 1;
    z-index: 10;
    left: 0;
    bottom: 0;
    width: calc((32px + 3vmin) * 5);
    height: calc(32px + 3vmin);
}

.edit_bt {
    user-select: none;
    padding: 0;
}

#edit_panel img {
    width: 100%;
    height: 100%;
    transform: scale(0.6);
}

#edit_panel div {
    /* display: inline-block; */
    height: calc(32px + 3vmin);
    width: calc(32px + 3vmin);
    float: left;
}

#edit_panel div:last-child {
    /* display: inline-block; */
    height: calc(32px + 3vmin);
    width: calc((32px + 3vmin) * 2);
}

#edit_panel #bt_hide_edit {
    transform: scaleY(-1);
}

#edit_panel #third {
    /* text-align: center;
    vertical-align: middle; */
    position: relative;
}

#edit_panel #third #color_disk {
    position: absolute;
    float: left;
    width: 100%;
    height: 100%;
    background-color: black;
    border: 5px solid;
    border-color: transparent;
    transform: scale(0.6);
    border-radius: 50%;
    box-sizing: border-box;
}

#edit_panel #last {
    /* text-align: center;
    vertical-align: middle; */
    position: relative;
}

#edit_panel #last #cd_wrapper {
    position: absolute;
    float: left;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: 2px black solid;
    transform: scaleY(0.5) scaleX(0.8);
    box-sizing: border-box;
}

#edit_panel #last #cd_wrapper #cd_slider {
    position: absolute;
    width: 10%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    /* box-sizing: border-box; */
}